import { Component } from 'react';
import { Layout } from 'antd';
import DocumentTitle from "react-document-title";
import pathToRegexp from "path-to-regexp";
import { Helmet } from "react-helmet";
import { ThemeContext, } from "@/utils/theme/customTheme";
import styles from "./styles.less";
import 'antd/dist/antd.css';

import Header from './components/Header';
import LeftMenu from './components/LeftMenu';
import NavigationBar from './components/navigationBar';

import { connect } from "dva";
const projetcName = "Demo";
const { Content, Footer, Sider } = Layout;
function mapStateToProps({ baseModel }) {
    return {
        baseModel: baseModel
    };
}
@connect(mapStateToProps)
class BasicLayout extends Component {
    getPageTitle = () => {
        const { route: { routes }, location } = this.props;
        const { pathname } = location;
        let title = projetcName;
        for (let variable in routes) {
            if (routes.hasOwnProperty(variable)) {
                if (
                    routes[variable].path &&
                    pathToRegexp(routes[variable].path).test(pathname)
                ) {
                    title = projetcName + `  ${routes[variable].name}`;
                }
            }
        }
        return title;
    };
    render() {
        let { collapsed } = this.props.baseModel;
        const { children } = this.props;
        return (
            <React.Fragment>
                <DocumentTitle title={this.getPageTitle()}>
                    <ThemeContext.Provider>
                        <Header />
                        <Layout style={{ minHeight: "100%" }}>
                            <Sider collapsed={collapsed} width={collapsed ? 80 : 256}>
                                <LeftMenu />
                            </Sider>
                            <Layout>
                                <div className={styles.rightBox}>
                                    <NavigationBar />
                                    {children}
                                </div>
                            </Layout>
                        </Layout>
                    </ThemeContext.Provider>
                </DocumentTitle>

            </React.Fragment>
        )
    }
}

export default BasicLayout;